<!-- 智慧用电 -->
<template>
  <div class="data-info">
    <ul class="list-menu">
      <li v-for="item in btnList" :key="item.index" @click="btnListFn(item)">
        <el-button :type="item.btnType">{{ item.name }}</el-button>
      </li>
    </ul>
    <!-- <ul v-if="activeName === '漏电探测器'" class="list-info">
      <li v-for="item in dataListStyleData" :key="item.index">
        <dataListStyle1 :item-data="item"/>
      </li>
    </ul>
    <ul v-if="activeName === '温度互感器'" class="list-info">
      <li v-for="item in dataListStyleData1" :key="item.index">
        <dataListStyle3 :item-data="item"/>
      </li>
    </ul> -->
    <ul class="list-info">
      <li v-for="item in dataListStyleData2" :key="item.index">
        <dataListStyle2 :item-data="item"/>
      </li>
    </ul>
  </div>
</template>
<script>
import $ from 'jquery'
import { eemS } from '@/api/internetData'
import { parseTime } from '@/utils/index'
// 主机，排风烟机等第一个页签的列表
import dataListStyle1 from './dataListStyle1.vue'
// 仪表盘
import dataListStyle2 from './dataListStyle2.vue'
// 温度计
import dataListStyle3 from './dataListStyle3.vue'
export default {
  components: {
    dataListStyle1,
    dataListStyle2,
    dataListStyle3
  },
  data() {
    return {
      activeName: '漏电探测器',
      activeKey: '234512631429682',
      // 主机
      dataListStyleData: [],
      // {
      //   name: '主机',
      //   place: '配电间',
      //   address: '南行贤苑-17号楼',
      //   date: '2020-01-01',
      //   active: '',
      //   list: [{
      //     name: '主电'
      //   }, {
      //     name: '自动'
      //   }, {
      //     name: '联动'
      //   }, {
      //     name: '设备'
      //   }]
      // }, {
      //   name: '主机',
      //   place: '水泵房',
      //   address: '南行贤苑-17号楼',
      //   date: '2020-01-01',
      //   active: 'active',
      //   list: [{
      //     name: '主电'
      //   }, {
      //     name: '自动'
      //   }, {
      //     name: '联动'
      //   }, {
      //     name: '设备'
      //   }]
      // }
      // 温度探测器
      dataListStyleData1: [{
        name: '温度探测器',
        place: '配电箱',
        address: '南行贤苑-高配间',
        date: '2020-01-01',
        isFault: '闭合',
        echartsName: 'dashboard1',
        echartsColor: '#FF5353',
        echartsData: ['20']
      }, {
        name: '温度探测器',
        place: '配电箱',
        address: '南行贤苑-高配间',
        date: '2020-01-01',
        isFault: '故障',
        echartsName: 'dashboard2',
        echartsColor: '#00A1FF',
        echartsData: ['105']
      }, {
        name: '温度探测器',
        place: '配电箱',
        address: '南行贤苑-高配间',
        date: '2020-01-01',
        isFault: '',
        echartsName: 'dashboard3',
        echartsColor: '#00A1FF',
        echartsData: ['150']
      }],
      // 剩余电流互感器
      dataListStyleData2: [],
      // {
      //   name: '电流互感器',
      //   place: '高配间',
      //   address: '南行贤苑-17号楼',
      //   date: '2020-01-01',
      //   isFault: false,
      //   echartsName: 'dashboard1',
      //   echartsData: ['250'],
      //   echartsCompany: 'mA',
      //   echartsMax: '2000',
      //   echartsColorList: [[0.15, '#0397FF'], [0.25, '#F6FF02'], [1, '#FE0002']]
      // }, {
      //   name: '电流互感器',
      //   place: '高配间',
      //   address: '南行贤苑-17号楼',
      //   date: '2020-01-01',
      //   isFault: true,
      //   echartsName: 'dashboard2',
      //   echartsData: ['150'],
      //   echartsCompany: 'mA',
      //   echartsMax: '2000',
      //   echartsColorList: [[0.15, '#0397FF'], [0.25, '#F6FF02'], [1, '#FE0002']]
      // }
      btnList: [{
        name: '漏电探测器',
        key: 234512631429682,
        btnType: 'primary'
      }, {
        name: '温度互感器',
        key: 256595904046261,
        btnType: ''
      }, {
        name: '电压互感器',
        key: 256594962544601,
        btnType: ''
      }, {
        name: '电流互感器',
        key: 256594028274860,
        btnType: ''
      }, {
        name: '功率互感器',
        key: 256596496461045,
        btnType: ''
      }]
    }
  },
  computed: {
  },
  created() {
    this.getList('234512631429682')
    this.$nextTick(function() {
      $('.list-menu li').click(function() {
        $(this).find('button').addClass('el-button--primary')
        $(this).siblings().find('button').removeClass('el-button--primary')
      })
    })
  },
  methods: {
    btnListFn(item) {
      this.activeName = item.name
      this.activeKey = item.key
      this.getList(item.key)
    },
    getList(name) {
      var params = {
        mid: this.activeKey
      }
      console.log(name)
      name = name + ''
      eemS(params)
        .then(response => {
          const data = response.data
          if (data.code === 40000) {
            // 排烟风机
            if (name === '234512630280121' || name === '234512629415391' || name === '234512628567361') {
              this.dataListStyleData = []
              data.data.forEach(item => {
                item.list = [{
                  name: '电源',
                  active: item.power_supply_state === '187468974402446' || item.power_supply_state === '187468974402446' ? 'active' : 'onActive'
                }, {
                  name: '自动',
                  active: item.manual_automatic_state === '187469071498221' || item.manual_automatic_state === '187469071498221' ? 'active' : 'onActive'
                }, {
                  name: '启动',
                  active: item.start_stop_state === '187467937620529' || item.start_stop_state === '187467937620529' ? 'active' : 'onActive'
                }, {
                  name: '设备',
                  active: item.device_state === '187465693247033' || item.device_state === '187465693247033' ? 'active' : 'onActive'
                }]
                item.lastTime = item.lastTime ? parseTime(item.lastTime * 1000, '{y}-{m}-{d} {h}:{i}:{s}') : ''
                item.active = item.online_state === '187469382053710' ? 'true' : 'false'
                item.otherInfo = false
                item.leftClass = item.online_state === '187469382053710' ? '' : 'active'
                this.dataListStyleData.push(item)
              })
            // 风压
            } else {
              console.log(data)
              this.dataListStyleData2 = []
              data.data.forEach((item, index) => {
                item.name = item.mname
                item.place = item.position
                item.address = item.park_name + ' - ' + item.building_name
                item.date = item.lastTime ? parseTime(item.lastTime * 1000, '{y}-{m}-{d} {h}:{i}:{s}') : ''
                item.isFault = item.online_state !== '187469382053710'
                item.echartsName = 'dashboard' + index
                item.echartsData = [item.value]
                item.echartsCompany = item.unit ? item.unit : ''
                item.echartsMax = item.capacity
                item.echartsColorList = [[0.02, '#FE0002'], [0.8, '#0397FF'], [1, '#FE0002']]
                this.dataListStyleData2.push(item)
              })
            }
          } else {
            this.$message.warning(response.data.message)
          }
        })
        .catch(() => {
        })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.data-info{
  padding-left: 40px;
}
.list-menu{
  margin-top: 20px;
  overflow: hidden;
  li{
    float: left;
    margin-right: 20px;
  }
}
.list-info{
  overflow: hidden;
  li{
    float: left;
    margin-right: 28px;
  }
}
</style>
